<template>
    <div class="app-container">
        <el-button type="text" @click="queryObj">打开查询对话框</el-button>
        <el-button type="text" @click="newObj">打开新增表单对话框</el-button>
        <el-button type="text" @click="editObj">打开编辑表单对话框</el-button>
        <el-button type="text" @click="confirmObj">打开提示对话框</el-button>
        <el-button type="text" @click="confirmBoxObj">打开提示对话框2</el-button>
        <dialog-confirm
            ref="confirmDialog"
            title="请确认"
            :okText="'好的'"
            :closeText = "'不好'"
            @dialogOk="confirmOk"
            @dialogClose="confirmClose">
            <span >{{confirmText}} </span>
        </dialog-confirm>
        <dialog-query
            ref="queryDialog"
            title="查询"
            @dialogOk="queryOk"
            @dialogClose="queryClose"
            :query="queryParams">
             <el-form label-width="120px" inline>
                <el-form-item label="公司名称">
                    <el-input  v-model="queryParams.arg1" clearable placeholder="请输入公司"></el-input>
                </el-form-item>
                <el-form-item  label="公司编号">
                    <el-input  v-model="queryParams.arg2" clearable placeholder="请输入编号"></el-input>
                </el-form-item>
                <el-form-item  label="所在省">
                    <el-select  v-model="queryParams.arg3" clearable placeholder="请选择省">
                        <el-option label="福建省" value="1"></el-option>
                        <el-option label="湖南省" value="2"></el-option>
                        <el-option label="江苏省" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="所在市">
                    <el-select  v-model="queryParams.arg4" clearable placeholder="请选择市">
                        <el-option label="福州市" value="1"></el-option>
                        <el-option label="厦门市" value="2"></el-option>
                        <el-option label="三明市" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </dialog-query>
       <dialog-submit
           ref="submitDialog"
           :title="dialogTitle"
           :getParams = "getParams"
           :rules="rules"
            @dialogOk="submitOk"
            @dialogClose="submitClose"
           >
                <el-form-item label="客户人员" prop="arg1">
                    <el-input  v-model="params.arg1" clearable placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item  label="客户去向" prop="arg2">
                    <el-input  v-model="params.arg2" clearable placeholder="请输入去向"></el-input>
                </el-form-item>
                <el-form-item  label="所在省">
                    <el-select  v-model="params.arg3" clearable placeholder="请选择省">
                        <el-option label="福建省" value="1"></el-option>
                        <el-option label="湖南省" value="2"></el-option>
                        <el-option label="江苏省" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="所在市">
                    <el-select  v-model="params.arg4" clearable placeholder="请选择市">
                        <el-option label="福州市" value="1"></el-option>
                        <el-option label="厦门市" value="2"></el-option>
                        <el-option label="三明市" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="联系方式" prop="arg6">
                    <el-input  v-model="params.arg6" clearable placeholder="请输入编号"></el-input>
                </el-form-item>
                 <el-form-item  label="客户LOGO">
                    <pic-upload v-model="params.arg5" content="建议50X40" style="width:200px"></pic-upload>
                </el-form-item>
       </dialog-submit>
    </div>
</template>

<script>
export default {
  data () {
    return {
      dialogTitle: '',
      queryParams: {},
      confirmText: '确定要这样子做吗',
      params: {},
      rules: {
        arg1: { required: true, max: 8, message: '请输入名称,最多8个字', trigger: 'blur' },
        arg2: { required: true, message: '请输入客户去向', trigger: 'blur' },
        arg6: { required: true, message: '请输入联系方式', trigger: 'blur' }
      }
    }
  },
  methods: {
    confirmObj () {
      this.$refs.confirmDialog.dialogOpen()
    },
    confirmOk () {
    },
    confirmClose () {
    },
    queryObj () {
      this.$refs.queryDialog.dialogOpen()
    },
    queryOk (msg) {
      // 页面上同时有查询和导出时注意判断是否需要导出查询数据
      console.log('查询情况', msg)
    },
    queryClose () {
    },
    getParams () {
      return this.params
    },
    newObj () {
      this.dialogTitle = '新增'
      this.$refs.submitDialog.dialogOpen()
    },
    editObj () {
      this.dialogTitle = '编辑'
      var title = {
        id: 1
      }
      this.$refs.submitDialog.dialogOpen(title)
    },
    submitOk (params) {
      // 回调的是提交时候的完整参数
    },
    submitClose () {
      this.params = {}
    },
    confirmBoxObj () {
      var _this = this
      this.confirmBox({
        title: '确认进行操作',
        message: '此操作将永久删除该文件, 是否继续?',
        okText: '确定',
        cancelText: '取消',
        callback (action, instance) {
          // 方法内使用js写法
          if (action === 'confirm') {
            _this.messageBox({
              message: '确定'
            })
          } else if (action === 'cancel') {
            _this.messageBox({
              message: '取消'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
